<template>
  <view class="container" style="padding-bottom: 100rpx;">
    <view>
      <BhTitle titleText="埋点数据"></BhTitle>
    </view>
	<view>
		<view class="info-wrap" style="    display: flex;
	align-items: center;justify-content: flex-start;
    margin-left: 30rpx;">
			<view class="info-title" style="margin-right: 30rpx;width:200rpx">时间</view>
			<view class="info-content" style="margin-right: 30rpx;width:220rpx">类型</view>
			<view class="info-content" style="margin-right: 30rpx;width:70rpx">数量</view>
			<view class="info-content">用户数</view>
		</view>
	</view>
	<view v-for="(item, index) in trackList" :key="index">
		<view class="info-wrap" style="    display: flex;
    align-items: center;
    justify-content: flex-start;margin: 10rpx 0 10rpx 30rpx;">
			<view class="info-title" style="margin-right: 30rpx;width:200rpx">{{ fmtCreateDate(item.createDate) }}</view>
			<view class="info-content" style="margin-right: 30rpx;width:220rpx">{{ eventName(item.eventType) }}</view>
			<view class="info-content" style="margin-right: 30rpx;width:70rpx">{{ item.count }}</view>
			<view class="info-content">{{ item.userCount }}</view>
		</view>
	</view>
  </view>
</template>

<script>
import {
  Api
} from '../../api/api'
import {
  CustomDict
} from '../../components/custom_views/custom_dict';
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import showAreaStreetTopSheet from '../../components/custom_views/show-area-street-top-sheet.vue';
import {
  showAreaStreetSheetMixin
} from '../../components/custom_views/show-area-street-sheet-mixin'
import {
  getDefaultPostDto
} from '@/components/post_item/post_add_sell_dto';
import {
  Dict
} from '../../components/custom_views/dict';
import showDropAreaSheet from '../../components/custom_views/show-drop-area-sheet.vue'
import showDropAcreageSheet from '../../components/custom_views/show-drop-acreage-sheet.vue'
import showDropIndustrySheet from '../../components/custom_views/show-drop-industry-sheet.vue'
import showDropRentSheet from '../../components/custom_views/show-drop-rent-sheet.vue'
import {
  bhTabMixin
} from '../../components/custom_views/mixin';
import postItemMyCollectSell from '@/PostPage/post_item/post_item_my_collect_sell.vue'
import postItemMyCollectBuy from '@/PostPage/post_item/post_item_my_collect_buy.vue'
import showDropAuditSheet from '../../components/custom_views/show-drop-audit-sheet.vue'
import { BackendApi } from '../../api/backend_api';
import userItem from './user_item.vue';
import { CustomDate } from '../../components/custom_views/custom_date';
export default {
  components: {
    bhNoMore,
    showAreaStreetTopSheet,
    showDropAreaSheet,
    showDropIndustrySheet,
    showDropAcreageSheet,
    showDropRentSheet,
    postItemMyCollectSell,
    showDropAuditSheet,
    userItem
  },
  mixins: [],
  data() {
    return {
      onlyTransCase: false,
      onlyHighQuality: false,
      tabList: [{
        id: 1,
        name: '转铺',
        list: [],
        param: {
          pageNum: 1,
          pageSize: 10,
          postType: Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
        }
      }],
      postDto: {
        areaCode: '',
        area: '',
        street: '',
        acreageMin: undefined,
        acreageMax: undefined,
        industryId: undefined,
        rentMin: undefined,
        rentMax: undefined,
        postStatus: undefined
      },
      // 是否显示搜索条件面板
      showArea: false,
      showIndustryId: false,
      showAcreage: false,
      showRent: false,
      showPostStatus: false,
      // 条件区域面积
      conditionHeight: 150,
      titleHeight: 0,
	  // 埋点数据
	  trackList:[]
    }
  },
  computed: {
    // 区域
    displayArea() {
      if (this.postDto.street) {
        if (this.postDto.street.length > 3) {
          return this.postDto.street.substring(0, 3)
        }
        return this.postDto.street
      } else if (this.postDto.areaCode) {
        if (this.postDto.area.length > 3) {
          return this.postDto.area.substring(0, 3)
        }
        return this.postDto.area
      } else {
        return '区域'
      }
    },
    // 行业
    displayIndustryId() {
      if (this.postDto.industryId && this.postDto.industryId != 0) {
        let industryName = CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
        if (industryName.length > 3) {
          return industryName.substring(0, 3)
        }
        return industryName
      } else {
        return '类型'
      }
    },
    // 面积
    displayAcreage() {
      if (this.postDto.acreageMin >= 0 && this.postDto.acreageMax >= 0) {
        let acreageDesc = CustomDict.getAcreageDesc(this.postDto.acreageMin, this.postDto.acreageMax)
        if (acreageDesc.length > 3) {
          return acreageDesc.substring(0, 3)
        }
        return acreageDesc
      } else {
        return '面积'
      }
    },
    // 租金
    displayRent() {
      if (this.postDto.rentMin >= 0 && this.postDto.rentMax >= 0) {
        let rentDesc = CustomDict.getRentDesc(this.postDto.rentMin, this.postDto.rentMax)
        if (rentDesc.length > 3) {
          return rentDesc.substring(0, 3)
        }
        return rentDesc
      } else {
        return '租金'
      }
    },
    // 审核状态
    displayPostStatus() {
      if (this.postDto.postStatus >= 0) {
        let postStatusDesc = CustomDict.getDictName(this.postDto.postStatus, Dict.PostStatusEnum)
        if (postStatusDesc.length > 3) {
          return postStatusDesc.substring(0, 3)
        }
        return postStatusDesc
      } else {
        return '审核'
      }
    },
  },
  methods: {
	  fmtCreateDate(createDate){
		  return CustomDate.formatSomeDate(new Date(createDate), 'yyyy/MM/dd')
	  },
	  eventName(eventType){
		  if(eventType == 2601){
			  return '点击准备发布按钮';
		  }else if(eventType == 2602){
			  return '点击留言';
		  }else if(eventType == 2603){
			  return '点击联系方式';
		  }else if(eventType == 2604){
			  return '点击购买会员';
		  }else {
			  return eventType
		  }
	  },
    onOnlyTransCase() {
      if (this.panelIsOpen()) {
        this.closePanel()
        return
      }
      if (this.onlyTransCase) {
        this.onlyTransCase = false
      } else {
        this.onlyTransCase = true
      }
      this.getTabData(0, true)
    },
    onOnlyHighQuality(){
      if (this.panelIsOpen()) {
        this.closePanel()
        return
      }
      if (this.onlyHighQuality) {
        this.onlyHighQuality = false
      } else {
        this.onlyHighQuality = true
      }
      this.getTabData(0, true)
    },
    toSellDetail(postId) {
      uni.navigateTo({
        url: '/PostPage/post_detail_sell/post_detail_sell_audit?postId=' + postId
      })
    },
    requestData(param) {
      // return BackendApi.v05_user_list(param, true)
      // if (this.onlyTransCase) {
      //   param.platformUser = 1
      //   return BackendApi.v05_user_list(param, true)
      // } else {
      //   param.platformUser = undefined
      //   return BackendApi.v05_user_list(param, true)
      // }
    },

    confirmArea(areaObj) {
      console.log('选择了地区信息', areaObj)
      this.postDto.area = areaObj.area
      this.postDto.areaCode = areaObj.areaCode
      this.postDto.street = areaObj.street
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmIndustryId(areaObj) {
      console.log('选择了行业信息', areaObj)
      this.postDto.industryId = areaObj.industryId
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmAcreage(areaObj) {
      if (areaObj) {
        this.postDto.acreageMin = areaObj.acreageMin
        this.postDto.acreageMax = areaObj.acreageMax
      } else {
        this.postDto.acreageMin = undefined
        this.postDto.acreageMax = undefined
      }

      this.closePanel()
      this.getTabData(0, true)
    },
    confirmRent(areaObj) {
      if (areaObj) {
        this.postDto.rentMin = areaObj.rentMin
        this.postDto.rentMax = areaObj.rentMax
      } else {
        this.postDto.rentMin = undefined
        this.postDto.rentMax = undefined
      }
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmPostStatus(areaObj) {
      if (areaObj) {
        this.postDto.postStatus = areaObj.postStatus
      } else {
        this.postDto.postStatus = undefined
      }
      this.closePanel()
      this.getTabData(0, true)
    },
    tapArea() {
      console.log("选择地区条件")
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showArea = true
      }
    },
    tapIndustryId() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showIndustryId = true
      }
    },
    tapAcreage() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showAcreage = true
      }
    },
    tapRent() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showRent = true
      }
    },
    tapPostStatus() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showPostStatus = true
      }
    },
    panelIsOpen() {
      return this.showArea || this.showIndustryId ||
        this.showAcreage || this.showRent || this.showPostStatus
    },
    closePanel() {
      this.showArea = false
      this.showIndustryId = false
      this.showAcreage = false
      this.showRent = false
      this.showPostStatus = false
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    let capsule = wx.getMenuButtonBoundingClientRect()
    this.titleHeight = capsule.height + 10 + capsule.top
	let that = this
	Api.TrackApi.v05_track_listv2(that,{}, (res) => {
		if(res.code == 200){
			that.trackList = res.data
		}
	})
  },
  onReachBottom() {
    console.log('触底了')
    // this.scrolltolower()
  },
  onPullDownRefresh() {
    this.getTabData(0, true, (res) => {
      uni.stopPullDownRefresh()
    })
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);



.container {
  min-height: 100vh;
  overflow-y: scroll;
  position: relative;
  background-color: #F5F9FA;
}

.body-wrap {
  // margin-top: 140rpx;
  margin-top: 220rpx;
}

.orange-line {
  width: 48rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #F8D247;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.search-bar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  background-color: white;
  // z-index: 10000;
  z-index: 101;
  // height: 88rpx;
  height: 130rpx;
}

.search-bar-condition {
  padding: 0 30rpx;
  height: 88rpx;
}

.search-bar-condition-item {
  padding: 0 16rpx;
  color: #666;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.search-bar-condition-item-active {
  font-weight: 600;
  color: #000;
}

.triangle {
  width: 0px;
  height: 0px;
  border: 10rpx solid transparent;
  border-top-color: #333333;
  margin-top: 10rpx;
  margin-left: 10rpx;
}
</style>